<template>
  <div class="event-condition">
    <TwoPart class="main-border">
      <template v-slot:part1>
        <div class="conditions">
          <Condition v-for="(item, index) in conditions"

                     :block="data.id"
                     :data="item"
                     :key="index"></Condition>
          <div class="operator">
            <span class="btn" @click="onAddNewCondition">添加条件</span>
          </div>
        </div>
      </template>
      <template v-slot:part2>
        <div class="actions">
          <Action v-for="(item, index) in actions"
                  :block="data.id"
                  :data="item"
                  :key="index"></Action>
          <div class="operator">
            <span class="btn" @click="onAddNewAction">添加动作</span>
          </div>
        </div>
      </template>
    </TwoPart>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, PropType, ref } from 'vue';
import { EventBlock } from '../../store/events';
import TwoPart from './tow-part.vue';
import Condition from './condition.vue';
import Action from './action.vue';
import { ProvideKey } from '../msg';

export default defineComponent({
  name: 'event-condition',
  components: { Action, Condition, TwoPart },
  emits: [],
  props: {
    data: {
      type: Object as PropType<EventBlock>,
      required: true,
      default: () => {
        return {};
      },
    },
  },
  setup(props, { emit }) {
    const conditions = ref(props.data.conditions || []);
    const actions = ref(props.data.actions || []);
    const addBlock = inject(ProvideKey.AddBlock, (blockID?: string) => {});
    const addBlockAction = inject(ProvideKey.AddBlockAction, (blockID: string) => {});
    return {
      actions, conditions,
      onAddNewCondition() {
        const data = props.data as EventBlock;
        addBlock(data.id);
      },
      onAddNewAction() {
        const data = props.data as EventBlock;
        addBlockAction(data.id);
      },
    };
  },
});
</script>
<style scoped lang="scss">
.event-condition {
  border-bottom: 1px solid #bfcce0;
  border-bottom-left-radius: 5px;
  display: flex;
  flex-direction: row;
  background-color: #bfcce0;

  .main-border {
    background-color: #e5eef9;
    margin-left: 4px;
    margin-bottom: 0;
    border: 1px solid #bfcce0;
  }

  .conditions {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .operator {
    .btn {
      color: #bfcce0;
      cursor: pointer;

      &:hover {
        color: #1a1a1a;
      }
    }
  }

  .actions {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>
